import { FC, useState, useCallback } from 'react';
import { Menu, Layout, Switch } from 'antd';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
const { Sider } = Layout;
import menuList, { menuIconSize } from './menuConfig';
import Logo from '@/components/Logo';
import { DARK, LIGHT } from '@/redux/modules/theme';
import { throttle } from 'lodash';

const zeroWidthTriggerStyle = {
  marginTop: '-52px',
};

const MySider: FC<{}> = () => {
  const [collapsed, setCollapsed] = useState(false);
  const [broken, setBroken] = useState(false);
  //菜单收缩
  const toggleCollapsed = useCallback(() => {
    setCollapsed(!collapsed);
  }, [collapsed, setCollapsed]);

  const onBreakpoint = useCallback(
    (broken: boolean) => {
      setBroken(broken);
    },
    [setBroken],
  );
  const [themeSwitch, setThemeSwitch] = useState(DARK);
  //切换主题
  const onChange = useCallback(
    throttle((checked: boolean) => {
      if (checked) {
        setThemeSwitch(LIGHT);
      } else {
        setThemeSwitch(DARK);
      }
    }, 500),
    [setThemeSwitch, themeSwitch],
  );

  return (
    <div>
      <Sider className="text-white h-screen relative" style={{ backgroundColor: '#101113' }} zeroWidthTriggerStyle={zeroWidthTriggerStyle} collapsed={collapsed} breakpoint="md" collapsedWidth={`${broken ? 0 : 70}`} onBreakpoint={onBreakpoint} onCollapse={toggleCollapsed}>
        <div onClick={toggleCollapsed} className="flex items-center justify-center w-full py-2 cursor-pointer">
          <div className={`mt-2 ${collapsed ? 'w-full text-center' : `w-1/6`}`}>{collapsed ? <MenuUnfoldOutlined className="text-white" style={{ fontSize: menuIconSize }} /> : <MenuFoldOutlined className="text-white" style={{ fontSize: menuIconSize }} />}</div>
          {collapsed ? null : (
            <div className="mt-2 w-8/12">
              <Logo></Logo>
            </div>
          )}
        </div>
        <Menu items={[...menuList]} theme="dark" defaultSelectedKeys={['1']}></Menu>
        {!collapsed ? (
          <div className="themeSwitch absolute bottom-6 w-full flex justify-center">
            <Switch checked={themeSwitch === LIGHT} onChange={onChange} checkedChildren={LIGHT} unCheckedChildren={DARK} />
          </div>
        ) : (
          ''
        )}
      </Sider>
    </div>
  );
};
export default MySider;
